<template>
  <!-- 自定义图标 -->
  <van-popup
    class="code-popup"
    v-model="showCodePop"
    closeable
    position="bottom"
    round
    @close="cancel"
  >
  <div class="code-popup-contanier">
    <div class="title">恭喜你获得一张抽奖码</div>
    <div class="code-box">
      <div class="code-item">
        <img src="https://img.wifenxiao.com/h5-wfx/images/activity/code_txm.png" alt="">
        <p>{{serialNumber}}</p>
      </div>
    </div>
    <div class="code-btn">
      <van-button  class="btn" color="linear-gradient(to right, #FA5F63, #E04045)" round type="info" @click="inviteFriend">邀请好友，获得更多的邀请码</van-button>
      <p>每邀请一个好友，获得一个抽奖码</p>
    </div>
  </div>
  </van-popup>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({ 
  props: {
    serialNumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showCodePop: false
    }
  },
  methods: {
    cancel() {
      this.$parent.luckDrawPrizeData()
    },
    inviteFriend() {
      this.cancel()
      this.showCodePop = false
      this.$parent.inviteFriend()
    }
  }
})
</script>
<style lang="scss">
.code-popup{
  background: #FEFAF3;
  height: 670px;
  .code-popup-contanier{
    height: 100%;
    .title{
      text-align: center;
      font-size: 36px;
      font-weight: 500;
      color: #C84348;
      line-height: 50px;
      height: 130px;
      padding-top: 48px;
    }
    .code-box{
       width: 686px;
       margin: 0 auto;
      .code-item{
        width: 686px;
        height: 322px;
        background: url(https://img.wifenxiao.com/h5-wfx/images/activity/code_bg.png) center/cover no-repeat;
        img{
          width: 520px;
          height: 86px;
          margin: 124px 74px 0 92px;
        }
        p{
          margin-top: 15px;
          font-size: 46px;
          font-weight: 500;
          color: #E6474C;
          line-height: 64px;
          text-align: center;
        }
      }
    }
    .code-btn{
      margin: 48px 32px 0;
      .btn{
        height: 80px;
        font-size: 32px;
        width: 100%;
      }
      p{
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #EA5D62;
        line-height: 40px;
        padding: 24px 0;
      }
    }
  }
  .van-popup__close-icon{
    color: #A86F3F;
    font-size: 32px;
    font-weight: bold;
  }
}
</style>